<template>
    <view @touchmove.stop="noop">
        <view class="i-modal-mask i-modal-mask-show"></view>
        <view class="i-modal i-modal-show">
            <view class="i-modal-main">
                <view class="i-modal-content">
                    <view class="i-modal-title">微信授权</view>
                    <view class="i-modal-body">xxx请求获得你的公开信息</view>
                    <view class="i-modal-actions">
                        <view class="modal-index--i-modal-grid i-grid">
                            <view class="modal-index--i-modal-grid-item i-grid-item">
                                <button @click="cancel">拒绝</button>
                            </view>
                            <view class="modal-index--i-modal-grid-item i-grid-item">
                                <button open-type="getUserInfo"
                                        lang="zh_CN"
                                        @getuserinfo="passive_authorize">允许
                                </button>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState,mapGetters } from 'vuex';
    export default {
        name: "get-authorize",
        data(){
            return{
            }
        },
        computed:{
        ...mapState([
                "userInfo",
            ]),
        },
        onShow(){
            /*this.init();*/
        },
        methods:{
            cancel(){
              let if_show=false
                this.$emit('if_show',false) //隐藏
                // this.$emit('next_order',false)  //后退一页
            },
            /**
             * 被动授权
             * */
            passive_authorize(params) {
                this.$emit('if_show',false)
                // this.showShouquan=false

                // console.log(params)
                uni.showLoading();
                if (params.detail) {
                    if (params.detail.errMsg == 'getUserInfo:ok') {
                        this.getLoginCode();
                    }
                }
            },
            /**
             * 获取微信登录code
             * */
            getLoginCode() {
                let that = this;
                console.log('根据获取到的用户信息处理业务代码');
                //接下来写业务代码
                uni.login({
                    provider: 'weixin',
                    success: function(res) {
                        // console.log(res)
                        if (res.errMsg == "login:ok") {
                            that.getUserInfo(res);
                        }
                    }
                });
            },
            /**
             * 获取到用户信息
             * */
            getUserInfo(loginCode) {
                let that = this;
                // 获取用户信息
                uni.getUserInfo({
                    provider: 'weixin',
                    success(res) {
                        console.log('获取用户信息成功');
                        uni.hideLoading();

                        /*   let userinfo=res.userInfo;
                           that.$lib.$store.commit('setUserInfo', userinfo);
                           console.log(that.userInfo)
                           uni.showToast({
                               icon: 'success',
                               title: '登录成功'
                           })*/


                        //此处得到userInfo
                        if (res.errMsg == 'getUserInfo:ok') {
                            //接下来写业务代码
                            that.bindGetUserInfo({
                                ...loginCode,
                                ...res
                            });
                        }

                    },
                    fail() {
                        console.log('获取用户信息失败');
                    }
                });
            },
            /**
             * 添加用户到后台数据库中
             * */
            async bindGetUserInfo(params) {
                let res = await this.$myHttp.post({
                    url: this.$myHttp.urlMap.authMini,
                    data: {
                        code: params.code,
                        // signature: params.signature,
                        // encryptedData: params.encryptedData,
                        // iv: params.iv,
                        rawData: params.rawData
                    },
                    permission: '',
                    need_login: false,
                });

                if (res.code == 1) {
                    uni.hideLoading();

                    // 注册用户成功
                    // 保存用户信息
                    let userinfo = {
                        'user_id': res.data.user_id,
                        'group_id': res.data.group_id,
                        avatarUrl: params.userInfo.avatarUrl,
                        city: params.userInfo.city,
                        country: params.userInfo.country,
                        gender: params.userInfo.gender,
                        language: params.userInfo.language,
                        nickName: params.userInfo.nickName,
                        province: params.userInfo.province,
                        expTime: 0,
                        token: res.data.token,
                    };

                    this.$store.commit('setUserInfo', {userinfo: {...userinfo, token: res.data.token}});
                    uni.showToast({
                        icon: 'success',
                        title: '登录成功'
                    })
                    this.$emit('next_order',true)
                } else {
                    this.canIUse = wx.canIUse('button.open-type.getUserInfo');
                }
            },
        }
    }

</script>

<style scoped>
    /*授权信息*/
    .i-modal-mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        z-index: 1000;
        transition: all 0.2s ease-in-out;
        opacity: 1;
        visibility: visible;
    }

    .i-modal {
        position: fixed;
        overflow: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100vh;
        z-index: 1000;
        display: flex;
        outline: 0;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        transform: translateZ(1px);
        opacity: 1;
        visibility: visible;
    }

    .i-modal-main {
        width: 270px;
        position: relative;
    }

    .i-modal-content {
        border-radius: 7px;
        padding-top: 15px;
        position: relative;
        background-color: #fff;
        border: 0;
        background-clip: padding-box;
        text-align: center;
        height: 100%;
        overflow: hidden;
    }

    .i-modal-title {
        padding: 6px 15px 15px;
        margin: 0;
        font-size: 18px;
        line-height: 1;
        color: #1c2438;
        text-align: center;
    }

    .i-modal-body {
        max-height: 100px;
        margin-bottom: 15px;
        font-size: 14px;
        color: #80848f;
        height: 100%;
        line-height: 1.5;
        overflow: auto;
    }

    .i-modal-actions {
        margin: 0 1px;
    }

    .i-grid {
        border-top: 1rpx solid #e9eaec;
        border-radius: 0 0 7px 7px;
        border-left: none;

        overflow: hidden;
    }

    .i-grid-item {
        position: relative;
        float: left;
        width: 33.33333333%;
        box-sizing: border-box;
        border-right: 1rpx solid #e9eaec;
        padding: 0;
        border-bottom: none;
        width: 50%;
    }
    button::after{
        border-radius: 0;
        border:none
    }
    button{
        border-radius: 0;
    }
</style>